<template>
	<div v-if="dataInfo">
		<navigationBar :bgType="3" :backType="2" navigationTitle="订单详情" />

		<view
			class="wrap"
			:style="{ '--navigation-height': navigationHeight + 'px' }"
			:class="{ paddingBottom: dataInfo.status !== '-1' }"
		>
			<image class="wrap-bg" :src="getImageURL('navigationBar/bg_one.png')" mode="widthFix" />

			<orderStatus :dataInfo="dataInfo" @overtime="getData" />

			<orderProcess :dataInfo="dataInfo" />

			<serviceInfo :dataInfo="dataInfo" />

			<customerInfo :dataInfo="dataInfo" />

			<orderInfo :dataInfo="dataInfo" />

			<orderProgress :dataInfo="dataInfo" />
		</view>

		<view class="footer safe-area flex align-center just-end" v-if="dataInfo.status !== '-1'">
			<orderBtn :btnType="2" :dataInfo="dataInfo" @onRefresh="getData" />
		</view>
	</div>
</template>

<script>
	import { orderDetail } from "@/API/order.js";
	import orderStatus from "@/components/order/orderStatus.vue";
	import orderProcess from "@/components/order/orderProcess.vue";
	import serviceInfo from "@/components/order/serviceInfo.vue";
	import customerInfo from "@/components/order/customerInfo.vue";
	import orderInfo from "@/components/order/orderInfo.vue";
	import orderProgress from "@/components/order/orderProgress.vue";
	import orderBtn from "@/components/order/orderBtn.vue";

	export default {
		components: {
			orderStatus,
			orderProcess,
			serviceInfo,
			customerInfo,
			orderInfo,
			orderProgress,
			orderBtn,
		},
		data() {
			return {
				navigationHeight: this.$navigationHeight, // 导航栏高度
				orderID: "", // 订单ID
				dataInfo: null, // 订单详情数据
			};
		},
		onLoad(options) {
			this.orderID = options.id;
			this.getData();
		},
		methods: {
			/**
			 * 网络请求
			 */
			getData() {
				orderDetail(this.orderID).then((res) => {
					this.dataInfo = res.data;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		--bottom-height: 140rpx;
		position: relative;
		z-index: 1;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: calc(100% - 40rpx);
		height: 128rpx;
		padding: 0 20rpx;
		background-color: white;
		z-index: 10;
	}
</style>
